<template>
	<view>
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem='clickItem' :info="info" :current="current" :mode="dotMode" :dots-styles="dotsStyle" field="content">
			<swiper class="swiper-box" :circular="circular" :style="{height: height+ 'rpx'}" @change="change" :current="swiperDotIndex" :autoplay="autoplay">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view draggable="false" class="swiper-item" :style="{borderRadius: borderRadius + 'px'}" @click="bannerDetail(item)">
						<image class="image" :src="item[map]" :mode="imageMode" draggable="false" />           
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		name: 'Banner',
		props: {
			autoplay: {
				type: Boolean,
				default: false
			},
			circular: {
				type: Boolean,
				default: true
			},
			info: {
				type: Array,
				default() {
					return []
				}
			},
			height: {
				type: String,
				default: '360'
			},
			dotMode: {
				type: String,
				default: 'default'
			},
			imageMode: {
				type: String,
				default: 'aspectFill'
			},
			map: {
				type: String,
				default: 'image'
			},
			borderRadius: {
				type: String,
				default: '0'
			},
			dotsStyle: {
				type: Object,
				default(){
					return {
            width: 6,           
            bottom: 40,
						backgroundColor: 'rgba(255,255,255, .7)',
						border: '1px solid #666',
						color: '#fff',
						selectedBackgroundColor: '#00CAC0',
						selectedBorder: '1px solid #00CAC0'
					}
				}
			}
		},
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
			}
		},
		methods: {
			clickItem(e) {
				this.swiperDotIndex = e
			},
			change(e){
				this.current =  e.detail.current
        this.$emit('change',e.detail.current)
			},
			bannerDetail(item) {
				if (item.jump_content) {
					if (item.jump_content.indexOf('http') >= 0) {
						uni.navigateTo({
							url: '/pages/webview/index?url=' + item.jump_content
						})
					} else {
						if (item.jump_content.indexOf('page') !== -1) {
							uni.navigateTo({
								url:item.jump_content
							});
						}else{
							uni.navigateTo({
								url: '/pages/detail/index?activityId=' + item.jump_content
							})
						}
					}
				}
				this.$emit('detail', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-box{
		width: 100%;
		height: 322rpx;
		.swiper-item{
			overflow: hidden;
			width: 100%;
			height: 322rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			// background-color: #000;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   position: relative;
		  
		}
		.image{
			// width: 100%;
			// height: 100%;
			width: 718rpx;
			height: 322rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
	}
</style>
